<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/zhuye.css"/>
		<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<div class="web">
			
			<!-- 内容 -->
			<div class="cont">
				
			 <div class="yuan">
				<div class="yuan_one1">
					<p>主宾桌</p>
					<div class="yuan_two"><img src="img/ren.jpg"/></div>
					<div class="yuan_theve"><img src="img/ren.jpg"/></div>
					<div class="yuan_four"><img src="img/ren.jpg"/></div>
					<div class="yuan_five"><img src="img/ren.jpg"/></div>
					<div class="yuan_six"><img src="img/ren.jpg"/></div>
					<div class="yuan_three"><img src="img/ren.jpg"/></div>
				</div>
				
			  </div>
			  
			  
			    <div class="yuan2">
				<div class="yuan_one">
					<p>第1席</p>
					<div class="yuan_two"><img src="img/ren.jpg"/></div>
					<div class="yuan_theve"><img src="img/ren.jpg"/></div>
					<div class="yuan_four"><img src="img/ren.jpg"/></div>
					<div class="yuan_five"><img src="img/ren.jpg"/></div>
					<div class="yuan_six"><img src="img/ren.jpg"/></div>
					<div class="yuan_three"><img src="img/ren.jpg"/></div>
				</div>
			    </div>
				
				<div class="yuan2">
				<div class="yuan_one">
					<p>第2席</p>
					<div class="yuan_two"><img src="img/ren.jpg"/></div>
					<div class="yuan_theve"><img src="img/ren.jpg"/></div>
					<div class="yuan_four"><img src="img/ren.jpg"/></div>
					<div class="yuan_five"><img src="img/ren.jpg"/></div>
					<div class="yuan_six"><img src="img/ren.jpg"/></div>
					<div class="yuan_three"><img src="img/ren.jpg"/></div>
				</div>
			    </div>
			    
			    <div class="yuan2">
				<div class="yuan_one">
					<p>第3席</p>
					<div class="yuan_two"><img src="img/ren.jpg"/></div>
					<div class="yuan_theve"><img src="img/ren.jpg"/></div>
					<div class="yuan_four"><img src="img/ren.jpg"/></div>
					<div class="yuan_five"><img src="img/ren.jpg"/></div>
					<div class="yuan_six"><img src="img/ren.jpg"/></div>
					<div class="yuan_three"><img src="img/ren.jpg"/></div>
				</div>
			    </div>
			    
			    <div class="yuan2">
				<div class="yuan_one">
					<p>第4席</p>
					<div class="yuan_two"><img src="img/ren.jpg"/></div>
					<div class="yuan_theve"><img src="img/ren.jpg"/></div>
					<div class="yuan_four"><img src="img/ren.jpg"/></div>
					<div class="yuan_five"><img src="img/ren.jpg"/></div>
					<div class="yuan_six"><img src="img/ren.jpg"/></div>
					<div class="yuan_three"><img src="img/ren.jpg"/></div>
				</div>
			    </div>
			    
			    <div class="yuan2 bigtable">
				<div class="yuan_one">
					<p>第<span>5</span>席</p>
					<div class="yuan_two"><img src="img/ren.jpg"/></div>
					<div class="yuan_theve"><img src="img/ren.jpg"/></div>
					<div class="yuan_four"><img src="img/ren.jpg"/></div>
					<div class="yuan_five"><img src="img/ren.jpg"/></div>
					<div class="yuan_six"><img src="img/ren.jpg"/></div>
					<div class="yuan_three"><img src="img/ren.jpg"/></div>
				</div>
			    </div>
			    
			    <div class="yuan2">
				<div class="yuan_one">
					<img src="img/JIA.png"/>
					<div class="yuan_two"><img src="img/ren.jpg"/></div>
					<div class="yuan_theve"><img src="img/ren.jpg"/></div>
					<div class="yuan_four"><img src="img/ren.jpg"/></div>
					<div class="yuan_five"><img src="img/ren.jpg"/></div>
					<div class="yuan_six"><img src="img/ren.jpg"/></div>
					<div class="yuan_three"><img src="img/ren.jpg"/></div>
				</div>
			    </div>
			    
			
			  
			<div class="clear"></div>
			<div class="dbu">
				<p>你是第<span>5</span>位嘉宾，目前已有<span>2</span>位宾客入席</p>
				<div class="tub">
					<img src="img/back.png"/>
				</div>
			</div>
			
		  </div>
			
		</div>
		<div class="fuc">
			<div class="fuc_one">
				<ul>
					<li>欢迎来到<span>___</span>的囍宴</li>
					<li>我要入席</li>
					<li>查看囍宴排行榜</li>
					<li>我也要制作我的囍宴</li>
				</ul>
				<div class="t"><img src="img/t.png"/></div>
			</div>
			
		</div>
		<script type="text/javascript">
//			$(".fuc_one .t").on("click",function(){
//				$(".fuc").css("display","none")
//			})
//			
//			$(".dbu .tub").on("click",function(){
//				$(".fuc").css("display","block")
//			})
//			$(".yuan_two").mousedown("click",function(){
//				$(this).css("transform","scale(1.5)")
//			})
//			$(".yuan_two ").mouseout("click",function(){
//				$(this).css("transform","scale(1)")
//			})



              // 桌子的动画
              
              var pwidth = window.innerWidth/2;
              var pheight = window.innerHeight/2;
              console.log(pwidth,pheight);
              var isCenter = false;
              $(".yuan_one").not(":last").on("touchend","p",function(e){
              	if(!isCenter){
              			isCenter = true;
//            			console.log(this);
		              	var dwidth = $(this).parents(".yuan2").offset().left;
		              	var dheight = $(this).parents(".yuan2").offset().top;
		              	console.log(dwidth,dheight);
		              	var bwidth = $(this).parents(".yuan2").width()/2;
		              	var bheight = $(this).parents(".yuan2").height()/2;
//		              	console.log(bwidth,bheight);
		              	var zwidth = pwidth - dwidth - bwidth;
		              	var zheight = pheight - dheight - bheight;
//		              	console.log(zwidth,zwidth);
		              	$(this).parents(".yuan2").css("top",zheight);
		              	$(this).parents(".yuan2").css("left",zwidth);
		              	$(this).parents(".yuan2").siblings().css("transform","scale(0)");
		              	$(this).parents(".yuan2").css("transform","scale(1.5)");
              	}else{
              		    $(this).parents(".yuan2").css("top",0);
		              	$(this).parents(".yuan2").css("left",0);
		              	$(this).parents(".yuan2").siblings().css("transform","scale(1)");
		              	$(this).parents(".yuan2").css("transform","scale(1)");
		              	isCenter = false;
              	}
              
              })
              var isCenter = false;
               $(".yuan_one1").on("touchend","p",function(e){
              	if(!isCenter){
              			isCenter = true;
//            			console.log(this);
		              	var dwidth = $(this).parents(".yuan").offset().left;
		              	var dheight = $(this).parents(".yuan").offset().top;
		              	console.log(dwidth,dheight);
		              	var bwidth = $(this).parents(".yuan").width()/2;
		              	var bheight = $(this).parents(".yuan").height()/2;
//		              	console.log(bwidth,bheight);
		              	var zwidth = pwidth - dwidth - bwidth;
		              	var zheight = pheight - dheight - bheight;
//		              	console.log(zwidth,zwidth);
		              	$(this).parents(".yuan").css("top",zheight);
		              	$(this).parents(".yuan").css("left",zwidth);
		              	$(this).parents(".yuan").siblings().css("transform","scale(0)");
		              	$(this).parents(".yuan").css("transform","scale(1.5)");
              	}else{
              		    $(this).parents(".yuan").css("top",0);
		              	$(this).parents(".yuan").css("left",0);
		              	$(this).parents(".yuan").siblings().css("transform","scale(1)");
		              	$(this).parents(".yuan").css("transform","scale(1)");
		              	isCenter = false;
              	}
              
              })
               
               
               //ajax
               
                $.ajax({
              	method:"get",
              	url:"http://student.bluej.cn/index/wedding/upload_user",
              	async:true,
              	dataType:"jsonp",
              	data:{
              		wechat_id:sessionStorage.openId,
				    name:sessionStorage.nickName,
				    province:sessionStorage.province,
				    city:sessionStorage.city,
				    head_img:sessionStorage.headImg
              	},
              	success:function(res){
					console.log(res);
//					$(".yuan_one div img").on("click",function(){
//						$(this).attr("src",res.head_img);
//					})
				}
              });
              $.ajax({
              	method:"get",
              	url:"http://student.bluej.cn/index/wedding/add_wedding",
              	async:true,
              	dataType:"jsonp",
              	data:{
              		wechat_id:sessionStorage.openId,
    				wedding_name:"坤",
    				wedding_position:"广州",
    				time:new Date(2017/11/11).getTime()
              	},
              	success:function(res){
					console.log(res);
//					$(".head span")[0].innerText += res.wedding_name;
//                  $(".dbu span")[0].innerTxt = res.sponsor_id;
//                   console.log(res.sponsor_id);
				}
              });
              $.ajax({
              	method:"get",
              	url:"http://student.bluej.cn/index/wedding/get_wedding",
              	async:true,
              	dataType:"jsonp",
              	data:{
              		sponsor_id:12
              		
              	},
              	success:function(res){
					console.log(res);
					
//					
//					
//					$(".yuan_one div").on("click",function(){
//						$(this).find("img").attr("src",res.wedding_seats[0].head_img);
//					})
//					
//					$(".yuan_one1 div").on("click",function(){
//						$(this).find("img").attr("src",res.wedding_seats[0].head_img);
//					})
				}
              });

		</script>
	</body>
</html>
